<template>
	<div>
		<van-nav-bar title="菜谱详情" left-text="返回" left-arrow placeholder fixed @click-left="onClickLeft" />
		<FoodsDetailInfoTitle
			:title="FoodDetailData.cpName"
			:des="FoodDetailData.des"
			:bg="FoodDetailData.largeImg || FoodDetailData.smallImg"
		/>
		<FoodsDetailInfoEveryoneSNote :time="FoodDetailData.ct" />
		<FoodsDetailInfoMaterials :yl="FoodDetailData.yl" />
		<FoodsDetailInfoStep :steps="FoodDetailData.steps" />
		<FoodStepsIndex
			v-show="showStepsStatus"
			:showStepsStatus="showStepsStatus"
			:steps="FoodDetailData.steps"
		></FoodStepsIndex>
		<van-goods-action>
			<van-goods-action-icon
				icon-class="iconfont icon-dianzan"
				text="点赞"
				:color="chatColor"
				@click="changeChatColor(chatColor)"
			/>
			<van-goods-action-icon icon="star" text="收藏" :color="starColor" @click="changeStarColor(starColor)" />
			<van-goods-action-button color="#ffd719" type="warning" text="开始制作" @click="showSteps" />
			<van-goods-action-button color="red" type="danger" text="购买食材" @click="jumpBuyIngredients" />
		</van-goods-action>
	</div>
</template>

<script>
import FoodsDetailInfoTitle from './components/FoodDetailInfoTitle.vue';
import FoodsDetailInfoEveryoneSNote from './components/FoodDetailInfoEveryoneSNote.vue';
import FoodsDetailInfoMaterials from './components/FoodDetailInfoMaterials.vue';
import FoodsDetailInfoStep from './components/FoodDetailInfoStep.vue';

import FoodStepsIndex from './components/FoodSteps/FoodStepsIndex.vue';

import { getMenuDetail } from '@/api/menu';
export default {
	name: 'FoodDetailInfoIndex',
	components: {
		FoodsDetailInfoTitle,
		FoodsDetailInfoEveryoneSNote,
		FoodsDetailInfoMaterials,
		FoodsDetailInfoStep,
		FoodStepsIndex,
	},
	data() {
		return {
			FoodDetailData: [],
			showStepsStatus: false,
			chatColor: '#000',
			starColor: '#000',
		};
	},
	async mounted() {
		this.FoodDetailData = await getMenuDetail({ id: this.$route.query.id, type: '单独菜品' }).then(
			(res) => res.datas[0]
		);

		await localStorage.setItem('FoodDetailData', JSON.stringify(this.FoodDetailData));
	},

	methods: {
		/** @method 展开步骤窗口 */
		showSteps() {
			this.showStepsStatus = true;
		},
		/** @method 跳转到购买页面 */
		jumpBuyIngredients() {
			this.$router.push({
				name: 'ConfirmOrder',
				params: {
					FoodDetailData: this.FoodDetailData,
				},
			});
		},
		/**
		 * @method 切换点赞颜色
		 * @param {String} color 颜色
		 *  */
		changeChatColor(collect) {
			if (!this.$store.state.isLogin) {
				this.$router.push('/userLogin');
			}
			if (collect != '#000') {
				this.chatColor = '#000';
			} else {
				this.chatColor = '#ff5000';
			}
		},
		/**
		 * @method 切换收藏颜色
		 * @param {String} color 颜色
		 */
		changeStarColor(collect) {
			if (!this.$store.state.isLogin) {
				this.$router.push('/userLogin');
			}

			if (collect != '#000') {
				this.starColor = '#000';
			} else {
				this.starColor = '#ff5000';
			}
		},
	},
};
</script>

<style scoped></style>
